import React, { useEffect, useState } from "react";
import { MyNavBar } from "../../../components";
import { useNavigate } from "react-router-dom";
import style from "./style.module.scss";
import bankCardFront from "../../../assets/images/image/hdpi/bank_card_front.png";
import commonIconClose from "../../../assets/images/icon/common resource/hdpi/common_icon_close_n.png";
import axios from "axios";
import { postHttp } from "../../../api";

const Index: React.FC = () => {
  const navigate = useNavigate();
  const src = localStorage.getItem("dataSrc");
  const dataSrc = src ? src : bankCardFront;
  const [bankCardNumber, setBankCardNumber] = useState("");
  const [bankName, setBankName] = useState("");
  const [bankCardType, setBankCardType] = useState("");
  const getCardInfo = async () => {
    const options = {
      method: "POST",
      url:
        "https://aip.baidubce.com/rest/2.0/ocr/v1/bankcard?access_token=" +
        (await getAccessToken()),
      headers: {
        "Content-Type": "application/x-www-form-urlencoded",
        Accept: "application/json",
      },
      data: {
        image: src,
      },
    };
    const resp = await axios(options);

    setBankCardNumber(resp.data.result.bank_card_number);
    setBankName(resp.data.result.bank_name);
    setBankCardType(resp.data.result.bank_card_type);
  };
  /**
   * 使用 AK，SK 生成鉴权签名（Access Token）
   * @return string 鉴权签名信息（Access Token）
   */
  async function getAccessToken() {
    const AK = "zGgXZaxbN4xNXMRjppBXhxy6";
    const SK = "5o6GEEZFgSPaWvkDOVtRADFSf9GGmH04";
    const options = {
      method: "POST",
      url:
        "/oauth/2.0/token?grant_type=client_credentials&client_id=" +
        AK +
        "&client_secret=" +
        SK,
    };
    const resp = (await postHttp(options.url)) as any;
    return resp.access_token;
  }

  const handleBind = () => {
    postHttp("/health/user/verify/v1/bindUserBankCard", {
      bankCardNumber,
      bankName,
      bankCardType,
    }).then(resp => {
      console.log(resp)
      if(resp.status === '0000') {
        navigate("/set/view/bank/cards") 
      }
    
    })

  };

  useEffect(() => {
    getCardInfo();
  }, []);

  return (
    <div className={style.bindConfirm}>
      <MyNavBar
        title="验证银行卡信息"
        style={{ background: "#fff" }}
        onClickLeft={() => navigate("/set/bind/bank/card")}
      ></MyNavBar>
      <div className={style.bindConfirm_container}>
        <div className={style.bindConfirm_box}>
          <img src={dataSrc} alt="" className={style.backgroundUrl} />
          <img src={commonIconClose} alt="" className={style.closeIcon} />
        </div>
        <div className={style.identity_box}>
          <div className={style.identity_item}>
            <div className={style.name_box}>
              <div>真实姓名</div>
              <div className={style.name}>王麻子</div>
            </div>
            <div className={style.bank_box}>
              <div>到账银行</div>
              <div className={style.bank}>{bankName}</div>
            </div>
            <div className={style.account_box}>
              <div>银行账号</div>
              <div className={style.account}>{bankCardNumber}</div>
            </div>
          </div>
        </div>
        <button className={style.btn} onClick={() => handleBind()}>
          确认绑定
        </button>
      </div>
    </div>
  );
};

export default Index;
